<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    /* .layui-form-label{
        width: 100px;
    }
    .layui-input-block{
        margin-left: 130px;
    } */
    .layui-inline{margin-bottom: 10px;}
</style>
<body>
    <blockquote class="layui-elem-quote">非实时，延迟1分钟左右更新</blockquote>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-inline layui-col-md3">
                    <label class="layui-form-label w-auto">商户单号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="order_no" placeholder="请输入商户单号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline layui-col-md3">
                    <label class="layui-form-label w-auto">交易单号：</label>
                    <div class="layui-input-block">
                        <input type="text" name="wechat_order_no" placeholder="请输入交易单号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline layui-col-md3">
                    <label class="layui-form-label w-auto">充值金额：</label>
                    <div class="layui-input-block">
                        <input type="text" name="total_fee" placeholder="请输入充值金额" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline layui-col-md3">
                    <label class="layui-form-label w-auto">支付状态：</label>
                    <div class="layui-input-block">
                        <select name="status" id="status">
                            <option value="0">未支付</option>
                            <option value="1">已支付</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline layui-col-md3">
                    <label class="layui-form-label w-auto">下单时间：</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="created_at" id="created_at" placeholder="选择时间">
                      </div>
                </div>
                <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </form>
        </div>
        <table id="orderList" lay-filter="orderList"></table>
    </div>
    <script>
        Ajax('/cps/recharge/getRechargeType', {type:0}).then(result => {
            let params = {
                elem: '#orderList'
                , toolbar: true
                , url: '/cps/keyword/orderList?id='+GetQueryString('id') //数据接口
                , id: 'orderList'
                , page:true
                , cols: [[ //表头
                    { field: 'id', title: 'ID', width: 80, sort: true,fixed:'left' }
                    , { field: 'uid', title: '用户ID' }
                    , { field: 'order_no', title: '商户单号' }
                    , { field: 'wechat_order_no', title: '交易单号' }
                    , { field: 'total_fee', title: '充值金额（元）' }
                    , { field: 'interpolate_id', title: '内推ID' }
                    , { title: '充值类型', width:100, templet: function (d) {
                            for (let index = 0; index < result.data.length; index++) {
                                const element = result.data[index];
                                if(element.id == d.type){
                                    return element.name
                                }
                            }
                        }
                    }, { field: 'created_at', title: '下单时间',width:160, templet: function (d) {
                            return dayjsFormat(d.created_at)
                        }
                    }
                ]]
            }
            tableList(params)
        })

        layui.use('laydate', function(){
            var laydate = layui.laydate;
            
            //常规用法
            laydate.render({
                elem: '#created_at'
            });
        })
    </script>
</body>

</html>